.counted-textarea {
	border: 1px solid var(--color-neutral-10);
	border-radius: 2px;
	background-color: var(--color-neutral-0);

	&.is-exceeding-acceptable-length {
		background: var(--color-error);

		.counted-textarea__count-panel,
		.gridicons-info-outline {
			color: var(--color-text-inverted);
		}
	}
}

.counted-textarea__input {
	display: block;
	resize: vertical;
	border: none;
	padding: 8px;
}

.counted-textarea__count-panel {
	padding: 8px;
	font-size: $font-body-extra-small;
	color: var(--color-neutral-50);
}
